<template>
    <div class="input-section">
        <div class="summer-title">分镜JSON脚本：</div>
        <textarea v-model="modelValue" placeholder="请粘贴分镜脚本JSON数据" class="json-input" />
        <div class="suffix-inputs">
            <div class="suffix-item">
                <label>情感氛围整体修饰：</label>
                <input v-model="emotionalSuffix" placeholder="输入情感氛围后缀" />
            </div>
            <div class="suffix-item">
                <label>人物细节整体修饰：</label>
                <input v-model="personSuffix" placeholder="输入人物细节后缀" />
            </div>
            <div class="suffix-item">
                <label>场景描述整体修饰：</label>
                <input v-model="sceneSuffix" placeholder="输入场景描述后缀" />
            </div>
        </div>
        <div v-if="error" class="error-msg">{{ error }}</div>
    </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';

const props = defineProps({
    modelValue: {
        type: String,
        required: true
    },
    error: {
        type: String,
        default: ''
    }
});

const emit = defineEmits(['update:modelValue']);

const emotionalSuffix = ref('');
const personSuffix = ref('');
const sceneSuffix = ref('');

const modelValue = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    }
});

watch([emotionalSuffix, personSuffix, sceneSuffix], () => {
    try {
        const jsonData = JSON.parse(props.modelValue);
        if (jsonData.output) {
            jsonData.output.forEach(item => {
                if (item.aiDrawTip) {
                    if (emotionalSuffix.value) {
                        item.aiDrawTip.emotionalAtmosphereSuffix = "," + emotionalSuffix.value;
                    }
                    if (personSuffix.value) {
                        item.aiDrawTip.personDetailSuffix = "," + personSuffix.value;
                    }
                    if (sceneSuffix.value) {
                        item.aiDrawTip.sceneDescrSuffix = "," + sceneSuffix.value;
                    }
                }
            });
            emit('update:modelValue', JSON.stringify(jsonData, null, 2));
        }
    } catch (error) {
        console.error('JSON解析错误:', error);
    }
});
</script>

<style scoped>
.input-section {
    width: 100%;
}

.summer-title {
    font-family: 'PingFang SC', sans-serif;
    font-size: 1.2rem;
    color: #1565C0;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.json-input {
    width: 100%;
    min-height: 400px;
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-family: monospace;
    margin-bottom: 1rem;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    resize: none;
}

.json-input:hover {
    border-color: #90caf9;
    box-shadow: 0 4px 16px rgba(144, 202, 249, 0.3);
}

.json-input:focus {
    outline: none;
    border-color: #42a5f5;
    box-shadow: 0 4px 16px rgba(66, 165, 245, 0.3);
}

.json-input::-webkit-scrollbar {
    width: 10px;
    background: linear-gradient(145deg, #f8f9fa, #ffffff);
    border-radius: 10px;
}

.json-input::-webkit-scrollbar-thumb {
    background: linear-gradient(145deg, #90caf9, #42a5f5);
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.json-input::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(145deg, #42a5f5, #1565C0);
    transform: scale(1.1);
}

.json-input::-webkit-scrollbar-thumb:active {
    background: #1565C0;
}

.error-msg {
    color: #d32f2f;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #ffcdd2;
    border-radius: 4px;
    background: #ffebee;
}

.suffix-inputs {
    margin: 1rem 0;
}

.suffix-item {
    margin-bottom: 1rem;
}

.suffix-item label {
    display: block;
    margin-bottom: 0.5rem;
    color: #1565C0;
    font-weight: 500;
}

.suffix-item input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.suffix-item input:focus {
    outline: none;
    border-color: #42a5f5;
    box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2);
}
</style>